<template>
	<div class="floatBar">
		<div class="navigationDiv" v-for="navigation in navigations">
			<img :src="navigation.img"></img>
			<div>{{navigation.label}}</div>
		</div>
		<div class="topDiv" @click="toTop()">
			<div>
				<img :src="require('@/assets/image/floatBar/backIcon.png')"></img>
			</div>
			<div style="margin-left: 5px">顶部</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "floatBar",
		data() {
			return {
				navigations: [{
					img: require('@/assets/image/floatBar/mobilePhone.png'),
					label: '移动门户'
				}, {
					img: require('@/assets/image/floatBar/phone.png'),
					label: '咨询热线'
				}, {
					img: require('@/assets/image/floatBar/headPhone.png'),
					label: '客服在线'
				}]
			}
		},
		methods: {
			/**
			 * 返回顶部
			 */
			toTop: function () {
				// document.body.scrollTop = 0;
				// document.documentElement.scrollTop = 0;
        this.backTop()
			}
		}
	}
</script>

<style scoped>
	.floatBar {
		position: fixed;
		right: 0;
		top: 30%;
		border: 1px solid #eeeeee;
		z-index: 101;
	}

	.navigationDiv {
		background-color: #FFFFFF;
		border-bottom: 1px solid #eeeeee;
		padding: 10px;
		font-size: 12px;
	}

	.navigationDiv:hover {
		cursor: pointer;
	}

	.topDiv {
		background-color: #f5f6f8;
		font-size: 12px;
		padding: 10px 0;
		display: flex;
		justify-content: center;
	}

	.topDiv:hover {
		cursor: pointer;
	}
</style>
